<template>
  <div class="c-bg-sgray" v-on:click.stop="stopClick" :style="'--mb7color:' + mb7Color" id="previewIndex">
    <cust-index-com
      :pageName="'PREVIEW_INDEX'"
      :isHomePage="false"
      :userType="userType"
      :isShowMemberTips="isShowMemberTips"
      :memberTips="memberTips"
      :dataList="dataList"
    ></cust-index-com>
    <!--客服功能-->
    <div class="c-pf c-p-b160 c-pz100 c-ph16 c-fc-sblack c-fs22 c-pv10 c-bg-white c-br-tr32 c-br-br32 c-flex-row c-aligni-center c-opacity90 c-box-shadow2 customerService" v-if="companyAuth.customerService.enableService == 1 && companyAuth.customerService.service != null && companyAuth.customerService.service.length > 0">
      联系客服<span class="iconfont c-ml10 c-fs32">&#xe82f;</span>
    </div>

  </div>
</template>
<script>
  import custIndexCom from '@/components/templates/custIndexCom.vue';
  import { utilJs } from "@/utils/common.js";
  let mId = '';
  let pageTitle = "";
  export default {
    name: "IndexFive",
    components: {
      custIndexCom,
    },
    props: {
    },
    data() {
      return {
        companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
        theme: "mb7_blue",
        isShowMemberTips: false, // 是否显示续费
        memberTips: "您的会员即将到期，请续费~", // 会员提示语
        showExpire: false, // 时间是否到期
        isiOS: navigator.userAgent.indexOf('IOSLogin') > -1 || navigator.userAgent.indexOf('IOSNewLogin') > -1 || navigator.userAgent.indexOf("IOSNewApp") > -1,
        dataList: [],
        userType: 1,
        mb7Color: localStorage.getItem("mb7ThemeColor") || "#ff8831",
        isPromotedAccount: false,
        isFromDraft: false
      };
    },
    mounted() {
      mId = this.$route.query.id ? this.$route.query.id : '';
      this.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
      this.isPromotedAccount = this.$route.query.isPromotedAccount == 1 ? true : false;
      this.isFromDraft = this.$route.query.isFromDraft == 1 ? true : false;
      // 判断体验版是否到期，到期之后不可购买商品
      let expireTime = new Date().getTime() + 1000 * 60;
      // 解决有时候白屏问题
      if (this.companyAuth) {
          expireTime = utilJs.getTimeByDate(this.companyAuth.expireTime);
      }
      this.showExpire = expireTime - (new Date()).getTime() < 0
      if (!this.showExpire) {
        this.getIndexInfo();
      } else {
        let isExireTime = new Date().getTime() - expireTime > 7776000000; // 过期时间超过3个月
        this.$cjConfirm({
          title: '店铺已打烊',
          message: `打烊期间无法购买商品，${isExireTime ? '无法访问!' : '所有服务停止!'}`,
          showCancelButton: false,
          clickCloseModal: false,
          onConfirm:() => {
            this.getIndexInfo();
          }
        })
      }
    },
    computed: {},
    watch: {
      $route(to, from) {
        if (to.path == "/") {
          this.getIndexInfo();
        }
      }
    },
    methods: {
      //屏蔽点击事件
      stopClick() {
      },
      //获取首页相关数据
      getIndexInfo() {
        this.$loading.show();
        let that = this;
        let cUrl = mId ? global.apiurl + "company/customTemplates?preview=1&id=" + mId : global.apiurl + "company/customTemplates?preview=1";
        if (this.isPromotedAccount) {
          cUrl = cUrl + '&isPromotedAccount=1'
        }
        if (this.isFromDraft) {
          cUrl = cUrl + '&isFromDraft=1'
        } else if (this.$route.query.isFromDraft != undefined && this.$route.query.isFromDraft != null && this.$route.query.isFromDraft == 0) {
          cUrl = cUrl + '&isFromDraft=0'
        }
        utilJs.getMethod(cUrl, function (res) {
          if (mId) {
            if (res.modules[0] && res.modules[0].modelType == 0 && res.modules[0].items) {
              pageTitle = res.modules[0].items.pageName ? res.modules[0].items.pageName : '微页面';
              setDocumentTitle(pageTitle);// eslint-disable-line
            }
          }
          that.$loading.hide();
          that.companyAuth = JSON.parse(localStorage.getItem("companyAuth"));
          that.userType = res.userType;
          localStorage.setItem(
            "vipType" + localStorage.getItem("userId"),
            res.userType
          );
          if (
            (res.userType == 2 || res.userType == 4) &&
            res.vipDay <= 7 &&
            res.vipDay > 0
          ) {
            let userTypeName = res.userType == 2 ? 'VIP' : 'SVIP';
            if (Number(res.vipDay) == 0) {
              that.memberTips =
              "您的" + userTypeName + "会员今天过期，";
            } else {
              that.memberTips =
              "您的" + userTypeName + "会员还有" + res.vipDay + "天过期，快来续费呦！";
            }
            that.isShowMemberTips = true;
          } else {
            that.isShowMemberTips = false;
          }
          that.dataList = res.modules;
          that.theme = res.color ? res.color : 'mb7_blue';
          that.mb7Color = res.colorValue;
          let rgbColor = utilJs.hexToRgb(res.colorValue);
          let rgbGradient = `linear-gradient(90deg,rgba(${rgbColor},1) 0%,rgba(${rgbColor},0.5) 100%);`;
          let shadowcolor = `0px 3px 10px 0px rgba(${rgbColor}, 0.2);`; // 模板色box-shadow
          let rgba10color = `rgba(${rgbColor},0.1)`;
          document.querySelector(
            "#previewIndex"
          ).style.cssText = `--mb7color:${that.mb7Color};--rgbcolor:${rgbGradient};--rgba10color:${rgba10color};;--shadowcolor:${shadowcolor}`;
          let title = mId ? pageTitle : window.localStorage.getItem("shareTitle");
          let shareImg = window.localStorage.getItem("shareLogo");
          let shareDesc = window.localStorage.getItem("shareDesc");
          let shareUrl = '';
          if (mId) {
            shareUrl = window.location.href.split("#")[0] +
            "#" +
            that.$route.path +
            "?refereeId=" +
            localStorage.getItem("userId") +
            '&id=' +
            mId;
          } else {
            shareUrl = window.location.href.split("#")[0] +
            "#" +
            that.$route.path +
            "?refereeId=" +
            localStorage.getItem("userId");
          }
          utilJs.wechatConfig(
            shareUrl,
            title,
            shareImg,
            shareDesc,
            function () { }
          );
        }, failRes => {
          that.$loading.hide();
        });
      },
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .customerService {
    left: -2.6rem;
  }
  .customerService:hover {
    left: 0;
  }
</style>
<style scoped>
.theme-fc {
  color: #ff8831;
  color: var(--mb7color);
}
.theme-fc-hover:hover {
  color: #ff8831;
  color: var(--mb7color);
}
.theme-bg {
  background-color: #ff8831;
  background-color: var(--mb7color);
}
.swiper-container .theme-bg {
  background-color: #ff8831;
  background-color: var(--mb7color) !important;
}
.theme-bg-10 {
  background-color: rgba(255, 99, 45, 0.1);
  background: var(--rgba10color);
}
.theme-bg-gradient {
  background: linear-gradient(
    90deg,
    rgba(255, 99, 45, 1) 0%,
    rgba(255, 99, 45, 0.7) 100%
  );
  background: var(--rgbcolor);
}
.theme-bg:hover,
.theme-bg:focus {
  background-color: #ff8831;
  background-color: var(--mb7color);
}
.theme-bd1 {
  border: 1px solid #ff8831;
  border: 1px solid var(--mb7color);
}
.theme-bd-b2 {
  border-bottom: 2px solid #ff8831;
  border-bottom: 2px solid var(--mb7color);
}
.theme-bd-b1 {
  border-bottom: 1px solid #ff8831;
  border-bottom: 1px solid var(--mb7color);
}
.theme-bd-rd1 {
  border-right: 1px dashed #ff8831;
  border-right: 1px dashed var(--mb7color);
}
.theme-bd-r1 {
  border-right: 1px solid #ff8831;
  border-right: 1px solid var(--mb7color);
}
.theme-bd-l2 {
  border-left: 2px solid #ff8831;
  border-left: 2px solid var(--mb7color);
}
.theme-bd-l4 {
  border-left: 4px solid #ff8831;
  border-left: 4px solid var(--mb7color);
}
.theme-box-shadow {
  box-shadow: 0px 3px 10px 0px rgba(255, 99, 45, 0.3);
  box-shadow: var(--shadowcolor);
}
</style>
